<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Options</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="./css/index.css">
</head>
<style>
	
	.bookmarks {
	    display: grid;
	    grid-template-columns: repeat(4, 1fr);
	    padding: 0 20%;
	}
	
	.bookmark {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    width: 100px;
	    height: 100px;
	    margin: 0 auto;
	    font-size: 0.9rem;
	    background-color: rgba(0, 0, 0, 0.3);
	    -webkit-backdrop-filter: blur(10px);
	    backdrop-filter: blur(10px);
	    text-decoration: none;
	    color: white;
	    border-radius: 8px;
	    transition: all 0.3s ease;
	    margin-bottom: 20px;
	}
	
	.bookmark:hover {
	    background-color: rgba(0, 0, 0, 0.6);
	    transform: translateY(-10px);
	}
	body{
		font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
	}
	
	.bookmark img {
	    width: 40px;
	    height: 40px;
	    margin-bottom: 5px;
	}
	
	@media (max-width: 768px) {
	    .bookmarks {
	        grid-template-columns: repeat(3, 1fr);
	        padding: 0;
	    }
	
	
	    .bookmark {
	        width: 80px;
	        height: 80px;
	    }
	}
	.weather{
		margin: 0 auto;
	
	}
	h1{
		font-size: 2.8rem;
		color: white;
		text-align: center;
		margin-top: 80px;		
		text-align:center;
	}
	body{
		margin: 0;
		padding: 0;
		align-items: center;
		height: 100vh;
		
		justify-content: center;
		align-items: center;
		background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
		/* 指定背景图像的大小 */
		background-size: 500%;
		/* 执行动画：动画名 时长 线性的 无限次播放 */
		animation: bgAnimation 15s linear infinite;
		font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
	}
	@keyframes bgAnimation {
	    0%{
	        background-position: 0% 50%;
	    }
	    50%{
	        background-position: 100% 50%;
	    }
	    100%{
	        background-position: 0% 50%;
	    }
	}
</style>
	<body>
		<div class="container">
		    <!-- --t是自定义属性，通过var函数可调用 -->
		    <li style="--t:20%;">
		        <a href="index.html">
		            <i class="fa fa-home" aria-hidden="true"></i>
		        </a>
		    </li>
		    <li style="--t:30%;">
		        <a href="Options.html">
		            <i class="fa fa-th-large" aria-hidden="true"></i>
		        </a>
		    </li>
		    
		    <div class="top"></div>
		    <div class="middle"></div>
		    <div class="bottom"></div>
		</div>
		<h1>常用网站</h1>
		<ol>
			<li></li>
			<li></li>
			<li></li>
		</ol>
		<nav class="bookmarks">
		    <a class="bookmark" href="https://www.baidu.com">
		        <img src="./image/baidu.png" alt="Baidu">
		        百度
		    </a>
		    <a class="bookmark" href="https://www.bilibili.com">
		        <img src="/.image/bilibili.png" alt="BiliBili">
		        BiliBili</a>
		    <a class="bookmark" href="https://tieba.baidu.com">
		        <img src="/image/tieba.png" alt="Tieba">
		        贴吧</a>
		    <a class="bookmark" href="https://github.com">
		        <img src="./image/github.png" alt="GitHub">
		        GitHub</a>
			<a class="bookmark" href="https://www.taobao.com">
				<img src="./image/taobao.png" alt="Taobao">
				淘宝</a>
			<a class="bookmark" href="https://www.jd.com">
				<img src="./image/jingdong.png" alt="Jingdong">
				京东</a>
			<a class="bookmark" href="https://www.douban.com">
				<img src="./image/douban.png" alt="Douban">
				豆瓣</a>
			<a class="bookmark" href="https://weibo.com">
				<img src="./image/weibo.png" alt="Weibo">
				微博</a>
		</nav>
		
		
	</body>
</html>
